<template>
  <div class="ebook-reader">
    <div id="read"></div>
  </div>
</template>

<script>
  import Epub from 'epubjs'
  import { ebookMixin } from '../../utils/mixin'
  import {
    getFontFamily,
    getFontSize,
    getTheme,
    saveFontFamily,
    saveFontSize,
    saveTheme
  } from '../../utils/localStorage'

  global.ePub = Epub

  export default {
    name: 'EbookReader',
    // 混入   对代码进行复用
    mixins: [ebookMixin],
    methods: {
      // 设置主题
      initTheme () {
        let defaultTheme = getTheme(this.fileName)
        if (!defaultTheme) {
          defaultTheme = this.themeList[0].name
          saveTheme(this.fileName, defaultTheme)
        }
        this.setDefaultTheme(defaultTheme)
        this.themeList.forEach(theme => {
          this.rendition.themes.register(theme.name, theme.style)
        })
        this.rendition.themes.select(defaultTheme)
      },
      // 设置字体
      initFont () {
        // 获取存储在localStorage里面的字体
        const font = getFontFamily(this.fileName)
        // 如果不存在 调用saveFontFamily存储当前的字体
        if (!font) {
          saveFontFamily(this.fileName, this.defaultFontFamily())
        } else {
          // 如果存在使用 this.rendition.themes.font 对页面进行处理
          this.rendition.themes.font(font)
          // 并传递存储的字体到vuex里面
          this.setDefaultFontFamily(font)
        }
      },
      // 设置字体大小
      initFontSize () {
        // 获取存储在localStorage里面的字体大小
        const fontSize = getFontSize(this.fileName)
        // 如果不存在 调用saveFontSize存储当前的字体大小
        if (!fontSize) {
          saveFontSize(this.fileName, this.defaultFontSize)
        } else {
          // 如果存在使用 this.rendition.themes.fontSize 对页面进行处理
          this.rendition.themes.fontSize(fontSize + 'px')
          // 并传递存储的字体大小到vuex里面
          this.setDefaultFontSize(fontSize)
        }
      },
      // 根据文件名请求数据
      initEpub () {
        const Url = `${process.env.VUE_APP_RES_URL}/epub/` + this.fileName + '.epub'
        // console.log(Url)
        // Epub的初始化
        this.book = new Epub(Url)
        // console.log(this.book)
        this.setCurrentBook(this.book)
        // 书籍渲染前的属性
        this.rendition = this.book.renderTo('read', {
          Width: innerWidth,
          height: innerHeight
        })
        // 进行渲染
        this.rendition.display().then(() => {
          // 调用主题处理函数
          this.initTheme()
          // 调用字体处理函数
          this.initFont()
          // 调用字体大小处理函数
          this.initFontSize()
          // 初始化全局样式
          this.initGlobalStyle()
        })
        // 点击开始事件
        this.rendition.on('touchstart', event => {
          this.touchStartX = event.changedTouches[0].clientX
          this.touchStartTime = event.timeStamp
          // console.log(event)
        })
        // 点击结束事件
        this.rendition.on('touchend', event => {
          const offsetX = event.changedTouches[0].clientX - this.touchStartX
          const time = event.timeStamp - this.touchStartTime
          // console.log(offsetX, time)
          if (time < 500 && offsetX > 40) {
            // 翻页是禁止显示标题栏
            this.hideTitleAndMenu()
            this.prevPage() // 向前翻页事件
          } else if (time < 500 && offsetX < -40) {
            // 翻页是禁止显示标题栏
            this.hideTitleAndMenu()
            this.nextPage() // 向后翻页事件
          } else {
            this.toggleTitleAndMenu() // 显示标题和菜单
          }
          // event.preventDefault() // 禁用事件默认方法调用
          event.stopPropagation() // 禁止事件传播
        })
        // 引入字体文件
        this.rendition.hooks.content.register(contents => {
          Promise.all([
            contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/daysOne.css`),
            contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/cabin.css`),
            contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/montserrat.css`),
            contents.addStylesheet(`${process.env.VUE_APP_RES_URL}/fonts/tangerine.css`)
          ])
        })
      },
      // 上一页
      prevPage () {
        if (this.rendition) {
          this.rendition.prev()
        }
      },
      // 下一页
      nextPage () {
        if (this.rendition) {
          this.rendition.next()
        }
      },
      // 点击时
      toggleTitleAndMenu () {
        if (this.menuVisible) {
          this.setSettingVisible(-1) // 不显示菜单栏也不显示设置栏
          this.setFontFamilyVisible(false) // 不显示字体设置栏
        }
        this.setMenuVisible(!this.menuVisible)
      },
      // 翻页时
      hideTitleAndMenu () {
        this.setMenuVisible(false) // 翻页是禁止显示标题栏和菜单栏
        this.setSettingVisible(-1) // 不显示菜单栏也不显示设置栏
        this.setFontFamilyVisible(false) // 不显示字体设置栏
      }
    },
    mounted () {
      // 获取文件名
      const fileName = this.$route.params.filename
      this.setFileName(fileName).then(() => {
        // 调用处理函数
        this.initEpub()
      })
    }
  }

</script>

<style scoped>

</style>
